<template>
  <div class="details">
    <div style="width: 100%; height: 100%">
      <van-swipe :autoplay="3000" @change="onChange" v-model="navactive">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" alt=""/>
        </van-swipe-item>
        <div class="custom-indicator" slot="indicator">
          {{ current + 1 }}/{{ images.length }}
        </div>
      </van-swipe>

    </div>
    <van-row class="row">
      <van-col span="12">
        <van-row class="row1">
          <van-col class="min-title">{{ cases.title }}</van-col>
          <van-col class="min-text"> {{ cases.brandName }}</van-col>
        </van-row>
        <van-row span="12" class="span">
          <van-col>{{ 62.6 }}㎡ |</van-col>
          <van-col>&nbsp;{{ cases.room }}室 |</van-col>
          <van-col>&nbsp;{{ cases.decorationForm }}</van-col>
        </van-row>
      </van-col>
      <van-col span="12" class="row2">
        <span class="price_num">{{ cases.region }}</span>
      </van-col>
    </van-row>
    <van-row class="row-2" type="flex">
      <van-col span="24" class="row-2-1">
        <h2>用户评论</h2>

        <span @click="goCommentData">查看全部 ＞ </span>
      </van-col>
      <van-col class="row-2-2" type="flex">
        <div>
          <!--          <img src="/wen1.png" alt="" />-->
          <!--          <span>被窝家装施工周期是多久？</span>-->

          <div v-if="message[0]" class="comment">
            <div>
              <img src="../assets/img/unlogin.png" alt="">

              <h1>{{ message[0].name }}</h1>

            </div>
            <div>
              <div>{{ message[0].content }}</div>
            </div>
          </div>

        </div>
      </van-col>
    </van-row>
    <article id="BEIWO_CASE" class="case-scroll" type="flex">
      <div class="link-title">
        <header>
          <h2>业主案例</h2>
          <p class="entry-text">
            <span>查看全部 ＞</span>
          </p>
        </header>
      </div>
      <article class="cases-scroll">
        <article v-for="(item,i) in index" :key="i">
          <header>
            <img
                class="lazy loaded"
                data-src="/row-3_1.png"
                style="object-fit: cover"
                src="/row-3_1.png"
                data-was-processed="true"
            />
          </header>
          <h3>父母装修必定土俗丑？NO！这两位是“中老年装修”的一股清流</h3>
          <h4>63㎡ | 12万</h4>
        </article>
      </article>
    </article>
    <van-row class="tcxq">
      <h3>套餐详情</h3>
      <van-col v-for="(q, i) of imageList" :key="i">
        <img :src="q" alt="" style="width: 100vw"/>
      </van-col>
    </van-row>
    <article id="BEIWO_CASE2" class="case-scroll2" type="flex">
      <div class="link-title2">
        <header>
          <h3>套餐商品</h3>
          <p class="entry-text">
            <span>查看全部 ＞</span>
          </p>
        </header>
      </div>
      <article class="cases-scroll">
        <article class="">
          <header>
            <img
                class="lazy loaded"
                data-src="/row-3_1.png"
                style="object-fit: cover"
                src="/row-3_1.png"
                data-was-processed="true"
            />
          </header>
          <p>温木地板</p>
          <span>杜甫超快</span><span>锁扣浸蜡</span>
        </article>

        <article class="">
          <header>
            <img
                class="lazy loaded"
                data-src="/row-3_1.png"
                style="object-fit: cover"
                src="/row-3_1.png"
                data-was-processed="true"
            />
          </header>
          <p>云光角线</p>
          <span>专利设计</span><span>光照柔和</span>
        </article>

        <article class="">
          <header>
            <img
                class="lazy loaded"
                data-src="/row-3_1.png"
                style="object-fit: cover"
                src="/row-3_1.png"
                data-was-processed="true"
            />
          </header>
          <p>齐眉门</p>
          <span>降噪耐热</span><span>降噪工艺</span>
        </article>

        <article class="">
          <header>
            <img
                class="lazy loaded"
                data-src="/row-3_1.png"
                style="object-fit: cover"
                src="/row-3_1.png"
                data-was-processed="true"
            />
          </header>
          <p>不器橱柜</p>
          <span>环保</span><span>防火防潮</span>
        </article>
      </article>
    </article>
    <van-row id="tcdb">
      <header class="tcdb_header">
        <h2>套餐对比</h2>
        <p>对比更多套餐 ＞</p>
      </header>

      <van-row id="duibi">
        <van-col span="12" class="duibi">
          <img src="/image/duibi0.png" alt=""/>
        </van-col>
        <img src="/image/vs.png" alt="" class="vs"/>
        <van-col span="12" class="duibi">
          <img src="/image/duibi1.png" alt=""/>
        </van-col>
        <van-row class="in_cb">
          <van-col span="12"><p>INNO俭良套餐</p></van-col>
          <van-col span="12"><p>2020纯白套餐</p></van-col>
        </van-row>
      </van-row>

      <van-row class="table">
        <van-col span="8" class="left_show">
          <p class="">1199元/㎡</p>
          <p class="">立邦漆</p>
          <p class="">iNNO强化地板</p>
          <p class="">欧神诺/马可波罗</p>
          <p class="">iNNO齐眉门</p>
          <p class="">方太侧吸烟机</p>
          <p class="">方太双眼灶具</p>
          <p class="">俭良专属木纹</p>
          <p class="">iNNO自在盆</p>
          <p class="">和成龙头</p>
          <p class="">科勒普通马桶</p>
          <p class="">iNNO定制花洒</p>
          <p class="">和成龙头</p>
          <p class="">名族风暖浴霸</p>
        </van-col>
        <van-col span="8" class="center_show">
          <p class="">价格</p>
          <p class="">墙面</p>
          <p class="">地板</p>
          <p class="">瓷砖</p>
          <p class="">室内门</p>
          <p class="">烟机</p>
          <p class="">灶具</p>
          <p class="">橱柜</p>
          <p class="">厨房水槽</p>
          <p class="">厨房龙头</p>
          <p class="">马桶</p>
          <p class="">花洒</p>
          <p class="">卫生间龙头</p>
          <p class="">卫生间顶面</p>
        </van-col>

        <van-col span="8" class="right_show">
          <p class="">1399元/㎡</p>
          <p class="">立邦漆/欧雅壁纸</p>
          <p class="">iNNO多层实木</p>
          <p class="">马可波罗</p>
          <p class="">iNNO造型木门</p>
          <p class="">美的蒸汽洗烟机</p>
          <p class="">美的双眼灶</p>
          <p class="">晶钢门板+原木色</p>
          <p class="">iNNO黑金水槽</p>
          <p class="">iNNO黑金龙头</p>
          <p class="">iNNO智能马桶</p>
          <p class="">iNNO黑金恒温</p>
          <p class="">iNNO黑金抽拉</p>
          <p class="">名族风暖浴霸</p>
        </van-col>
      </van-row>
      <section id="BEIWO_STORE" class="experience-store">
        <h2>被窝直营体验店</h2>
        <article class="store-card">
          <header>
            <img src="image/tiyan.png"/>
            <div class="__vr_newrt_logo__"></div>
          </header>
          <footer>
            <div class="left-text">
              <h3>万链体验馆(南四环店)</h3>
              <p>
                <span class="morewidth">
                  北京市丰台区马家堡东路189号福海棠华苑2-4底商</span
                >
              </p>
            </div>
            <p class="button">预约到店</p>
          </footer>
          <div class="num-people">
            <p></p>
            <span>近期有116人预约到店</span>
          </div>
        </article>
      </section>
    </van-row>
    <van-row id="tcgz">
      <div id="PRODUCT_RULE" class="comborule-wrp">
        <h3>套餐规则</h3>
        <div class="title-wrp">
          <div class="title-text">iNNO俭良套餐</div>
          <div class="price-wrp">
            <div class="price-text">1199</div>
            <div class="price-unit">元/㎡</div>
          </div>
        </div>
        <div class="rule-content">不足60㎡按60㎡计</div>
        <div class="rule-text">产品基础条件</div>
        <div class="rule-content">
          1
          产品内施工区域包含户型原结构门厅、客厅、餐厅、过道、阳台等公共空间，卧室、书房、儿童房等居室空间，卫生间，厨房，室内房高在2.8米以内的平层户型，适应北京市(6环以内）所有楼盘。
        </div>
        <div class="rule-text">计算面积计算标准</div>
        <div class="rule-content">
          2
          计费面积以房屋产权证或不动产权证登记的建筑面积或购房合同登记的预计建筑面积为准，另收取合同额3.41%的税金；
        </div>
        <div class="rule-content">
          3
          若无法提供房屋产权证或不动产权证或购房合同的原件及复印件的，则以套内建筑面积实测/0.75为准；
        </div>
        <div class="rule-content">
          4 异形、扩建和赠送部分按实测套内建筑面积/0.75为准；
        </div>
        <div class="rule-content">
          5 房屋原结构，以量房的实际状态为准，不包含新建隔墙；
          注：套内建筑面积=房屋外墙内径实测面积（含套内墙体、含全封闭阳台、含飘窗）
        </div>
        <div class="rule-content">
          6
          产品内如遇房高超过2.8米，在2.8-3.6m范围内收取2.8m以上相关施工、主材项目费用；
        </div>
        <div class="rule-content">
          7
          房高大于3.6m时，按照房顶水平投影面积收取超高措施费：34元/㎡（脚手架费用）+2.8m以上相关施工、主材项目费用，如墙面拆除、石膏找平、刮腻子、刷漆、壁纸基层处理、壁纸主材等费用；
        </div>
        <div class="rule-content">
          8 北京辖区内-远程费收费标准：
          1、距六环最近直线距离≤10km北京行政区内，项目距离六环最近点直线距离10km以内（含），按合同额的
          6%收取远程管理费；2、距六环最近直线距离＞10km北京行政区内，项目距离六环最近点直线距离10km以外，按合同额的8%收取远程管理费；3、非北京区域以及密云、平谷、延庆、怀柔暂不提供服务；
        </div>
        <div class="rule-content">
          9
          房屋建筑面积不足60㎡按60㎡计算。本资料所涉图文仅供参考，不作为实际交付标准或合同附件，
          交付结果以最终签订的买卖合同为准，家具、窗户、防盗门均不包含在内，可单独购买。
        </div>
        <div class="rule-content">
          * 10
          2020年8月18日开始，万链新认购的订单施工服务全部切换，切换后施工服务由原投资方贝壳（链家）旗下被窝家装提供。
        </div>
      </div>
    </van-row>
    <div class="x-button">
      <router-link to="/compute">
        <span></span>
        计算报价
      </router-link>
      <button>电话咨询</button>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex"
import {post, get} from "../assets/js/config/api";

export default {
  name: "Decoration_inf",
  computed: {
    ...mapState(["shopId", "imageUrl"]),
  },

  data() {
    return {
      cases: {},
      index: [1, 2, 3, 4, 5],
      id: this.$route.params.id,
      projectOrderId: {},
      params: {},
      message: [],
      value: '',
      images: [
        "./image/lunbo1.jpg",
        "./image/lunbo2.jpg",
        "./image/lunbo3.jpg",
      ],
      imageList: [
        "image/1.jpg",
        "image/2.jpg",
        "image/3.jpg",
        "image/4.png",
        "image/5.png",
        "image/6.png",
        "image/7.png",
        "image/8.png",
        "image/9.png",
        "image/10.png",
        "image/11.png",
      ],
      sss: true,
      current: 0,
      navactive: 1,
    };
  },

  mounted() {
    this.projectOrderId.projectOrderId = this.id

    post('/cases', this.projectOrderId).then(
        result => {
          //console.log(result)
          this.cases = result.result;
        }
    ).catch(err => {
      console.log(err)
    })
    this.params.orderId = this.id
    get('/comment', this.params).then(
        result => {
          console.log(result.result)
          this.message = result.result
        }
    )


  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    goCommentData(){
      if(this.message.length){
        this.$router.push(
            `/comment_data/${this.id}`
        )
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "public/sass/details";

.tag {
  background-color: yellowgreen;
}

.row {
  display: flex;
  margin-top: 5vh;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.row1 {
  display: flex;
  line-height: 5vh;
  justify-content: center;
  color: #222;
  font-size: 4.267vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 700;
}

.min-text {
  width: 8vw;
  height: 5vw;
  background: #caae85;
  border-radius: 0.533vw;
  text-align: center;
  font-size: 3.2vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 700;
  line-height: 5.333vw;
  color: #fff;
  margin-top: 1.3vh;
  margin-left: 1vw;
}

.span {
  display: inline-block;
  box-sizing: border-box;
  padding: 1.333vw;
  background: rgba(202, 174, 133, 0.1);
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 4.533vw;
  color: #a98f68;
  border-radius: 0.533vw;
  text-align: center;
  margin-left: 8vw;
}

.price_num {
  font-size: 6vw;
  font-family: DINAlternate-Bold;
  line-height: 12vw;
  color: #222;
}

.row2 {
  text-align: center;
  line-height: 5vh;
  justify-content: center;
  align-items: center;
  color: #222;
  font-size: 4.267vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 700;
  margin-top: 2vh;
}

.row-2 {
  width: 100%;
  box-sizing: border-box;
  padding: 2vh 5.333vw 0;
}

.row-2 .row-2-1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2vh;
}

.row-2-1 span {
  display: block;
  font-size: 3.733vw;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 5.333vw;
  color: #999;
}

.row-2 .row-2-2 {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-top: 2vh;
}

.row-2 .row-2-2 span {
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 3.2vh;
  color: #222;
}

.row-2 .row-2-2 img {
  width: 4.8vw;

  /*  background: url(/wen1.png) no-repeat 50%;
    background-size: cover; */
  margin-right: 1.6vw;
  line-height: 3.2vh;
}

.van-swipe img {
  width: 100%;
  position: relative;
}

.custom-indicator {
  display: inline-block;
  position: absolute;
  bottom: 7.467vw;
  right: 5.333vw;
  z-index: 888;
  width: 10.667vw;
  height: 5.867vw;
  border-radius: 3.2vw;
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 2.667vw;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 5.867vw;
  color: #fff;
  text-align: center;
  transform: translateZ(266.667vw);
}

.tag-btn-wrapper li {
  display: block;
  width: 15vw;
  font-size: 3.8vw;
  text-align: center;

  border-radius: 3.2vw;
}

#BEIWO_CASE {
  overflow: auto;
}

.link-title {
  width: 100%;
  box-sizing: border-box;
  padding: 5vw 5.333vw 0;
  font-size: 4vw;
}

.case-scroll .cases-scroll {
  display: flex;
  overflow: auto;
  margin-top: 2vh;
}

.case-scroll .cases-scroll article {
  margin-left: 5vw;
}

.case-scroll .cases-scroll article h3 {
  font-size: 3.467vw;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 4vw;
  color: #222;
  font-weight: 400;
  margin: 2vw 0;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.case-scroll .cases-scroll article h4 {
  font-size: 3.467vw;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 4.8vw;
  color: #999;
  font-weight: 400;

  max-width: 42.933vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-scroll .cases-scroll article header img {
  width: 43vw;
  height: 42vw;
  border-radius: 1.333vw;
  overflow: hidden;
  position: relative;
}

.link-title header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2vh;
}

.link-title header span {
  display: block;
  font-size: 3.733vw;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 5vw;
  color: #999;
}

.tcxq h3 {
  margin: 5vw;
  display: block;

  line-height: 8vh;
}

#BEIWO_CASE2 {
  overflow: auto;
  margin: 3vw;
}

.link-title2 {
  width: 100%;
  box-sizing: border-box;
}

.case-scroll2 .cases-scroll {
  display: flex;
  overflow: auto;
  margin-top: 2vh;
}

.case-scroll2 .cases-scroll article {
  margin-left: 5vw;
}

.case-scroll2 .cases-scroll article > p {
  margin: 2vw;
  padding: 0;
}

.case-scroll2 .cases-scroll article span {
  display: inline-block;
  height: 5vw;
  width: 15vw;
  color: rgb(238, 150, 34);
  background: #e6ded2;
  border-radius: 0.533vw;
  text-align: center;
  line-height: 5vw;
  font-size: 3.2vw;

  margin-left: 1vw;
}

.case-scroll2 .cases-scroll article header img {
  width: 43vw;
  height: 42vw;
  border-radius: 1.333vw;
  overflow: hidden;
  position: relative;
}

.link-title2 header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2vh;
}

.link-title2 header span {
  display: block;
  font-size: 3.733vw;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 5.333vw;
  color: #999;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: white;
}

.calculate-icon img {
  width: 50%;
}

#tcdb {
  margin-top: 3vw;
}

#tcdb header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 3vw;
  margin-right: 3vw;
}

#duibi {
  position: relative;
  margin-left: 15px;
}

#tcdb .duibi img {
  width: 165px;
  height: 165px;
  border-radius: 5px;
}

#tcdb .vs {
  position: absolute;
  top: 50%;
  left: 48%;
  transform: translate(-50%, -50%);
  z-index: 888;
  width: 50px;
  height: 50px;
}

#tcdb .in_cb {
  margin: 3vw 0;

}

#tcdb .in_cb p {
  text-align: center;
  font-size: 4.267vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 700;
  line-height: 4.267vw;
  margin-top: 3vw;
  color: #222;
}

#tcdb .table .van-col p {
  margin-bottom: 5vw;
}

#tcdb .left_show {
  margin: 2vw 0;
  text-align: right;
  font-size: 3.733vw;
  font-family: PingFangSC-Regular, PingFang SC;
}

#tcdb .center_show {
  margin: 2vw 0;
  text-align: center;
  font-size: 3.733vw;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #bbb;
}

#tcdb .right_show {
  margin: 2vw 0;
  text-align: left;
  font-size: 3.733vw;
  font-family: PingFangSC-Regular, PingFang SC;
}

#tcdb .experience-store {
  width: 100%;
  box-sizing: border-box;
  padding: 10.667vw 5.333vw 0;
}

#tcdb .experience-store h2 {
  font-size: 5.333vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 700;
  line-height: 5.333vw;
  color: #222;
}

#tcdb .experience-store .store-card {
  width: 100%;
  border-radius: 1.333vw;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1.067vw 4.267vw 0 rgba(0, 0, 0, 0.05);
  margin-top: 5.333vw;
  position: relative;
}

#tcdb .experience-store .store-card .num-people {
  display: flex;
  align-items: center;
  position: absolute;
  left: 2.667vw;
  top: 2.667vw;
  z-index: 10;
  background: rgba(0, 0, 0, 0.2);
}

#tcdb .experience-store .store-card .num-people p {
  width: 2.667vw;
  height: 2.667vw;
}

#tcdb .experience-store .store-card .num-people span {
  display: block;
  font-size: 2.667vw;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 2.667vw;
  color: #fff;
  margin-left: 1.067vw;
}

#tcdb .experience-store .store-card header {
  width: 100%;
  height: 29.867vw;
  position: relative;
}

#tcdb .experience-store .store-card header img {
  width: 100%;
  height: 100%;
  vertical-align: top;
}

#tcdb .experience-store .store-card footer {
  width: 100%;
  box-sizing: border-box;
  padding: 3.733vw 3.733vw 3.2vw;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#tcdb .experience-store .store-card footer .left-text h3 {
  font-size: 4.267vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 700;
  line-height: 4.267vw;
  color: #222;
}

#tcdb .experience-store .store-card footer .left-text p {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 1.333vw;
}

#tcdb .experience-store .store-card footer .left-text p span {
  display: block;
}


.rule-content {
  width: 100%;
  height: auto;
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 4.533vw;
  color: #999;
  margin-bottom: 1.6vw;
  content: "viewport-units-buggyfill; font-size: 3.2vw; line-height: 4.533vw; margin-bottom: 1.6vw";
}

.rule-text {
  width: 100%;
  font-size: 4.267vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 700;
  line-height: 4.267vw;
  color: #222;
  margin-bottom: 2.667vw;
}

.title-text {
  font-size: 4.8vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 700;
  line-height: 6.667vw;
  color: #222;
}

.price-wrp, .title-wrp {
  display: flex;
  justify-content: space-between;

}

.comborule-wrp {
  margin: 15px;
}

.price-wrp .price-text {
  font-size: 6.933vw;
  font-family: DINAlternate-Bold;
  line-height: 8vw;
  color: #222
}

.price-wrp .price-unit {
  font-size: 3.2vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 700;
  line-height: 6.133vw;
  color: #222;
  margin-left: .533vw;
}

#tcgz {
  margin-bottom: 60px;
}


.experience-store .store-card footer .left-text p span:first-child {
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 4.533vw;
  color: #999;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.experience-store .store-card footer .left-text p .morewidth {
  max-width: 55.467vw;
}

.experience-store .store-card footer .left-text p span:nth-child(2) {
  width: 3.733vw;
  height: 3.733vw;
}

.experience-store .store-card footer .button {
  box-sizing: border-box;
  height: 9.067vw;
  padding: 2.933vw 3.2vw;
  background: #222;
  font-size: 3.2vw;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 700;
  line-height: 3.2vw;
  color: #fff;
  border-radius: 1.333vw;
}
</style>
